<template>
  <div class="BeeperRecordTable">

      <el-dialog
      :title="dialog.title"
      :visible.sync="dialog.open"
      width="max-content" append-to-body
      center>
      <el-row>
        <el-table :data="tableList" :fit="true" highlight-current-row>
        <el-table-column prop="recordType" :formatter="formatRecordType"  label="呼叫类型" align="center" width="100"></el-table-column>

             <el-table-column prop="serverName" label="功能名称" align="center" width="150"></el-table-column>
             <el-table-column prop="nums" label="数量" align="center" width="50"></el-table-column>
             <el-table-column prop="businessName" label="商家" align="center" width="150"></el-table-column>
             <el-table-column prop="recordState" :formatter="formatRecordState" label="处理状态" align="center" width="150"></el-table-column>
             <el-table-column prop="fastFlag" :formatter="formatFastFlag"  label="是否加急" align="center" width="100">
               <template slot-scope="scope">
                  <span>
                    <el-tag size="mini" type="danger" v-if="scope.row.fastFlag == 1">
                      急
                    </el-tag>
                  </span>
               </template>
             </el-table-column>
             <el-table-column prop="createDate" label="呼叫时间" align="center" width="100"></el-table-column>
             <el-table-column prop="cancelDate" label="取消时间" align="center" width="100"></el-table-column>
             <el-table-column label="操作" align="center">
                <template slot-scope="scope" >
                    <div v-if="scope.row.recordState==1&&(scope.row.recordType==2 || scope.row.recordType==4)">
                        <el-button style="color:#4DA635"  size="mini" @click.native="handleUpdateRecord(scope.row, 2)">接单</el-button>
                    </div>
                  <div v-if="scope.row.recordState==2&&scope.row.recordType==2">
                    <el-button style="color:#4DA635"  size="mini" @click.native="handleUpdateRecord(scope.row, 20)">完成</el-button>
                  </div>
                </template>
             </el-table-column>
        </el-table>
      </el-row>

      </el-dialog>

  </div>
</template>
<script>
import EquipApi from '@/api/equip/equip';
export default {
    data(){
        return{
            dialog:{
                open: false ,  // 默认隐藏
                title: "",
            },
            tableList:[]
        }
    },
    created(){
        this.init();
    },
    methods:{
        init(){
            this.$Utils.clearData(this.tableList);
        },
        // formatState (cellValue) {
        //     if (cellValue === -1) {
        //         return '删除'
        //     } else if (cellValue === 0) {
        //         return '禁用'
        //     } else if (cellValue === 1) {
        //         return '启用'
        //     }
        // },
        // formatStates (cellValue) {
        //     if (cellValue == -1) {
        //         return 'danger'
        //     } else if (cellValue == 0) {
        //         return 'info'
        //     } else if (cellValue == 1) {
        //         return 'success'
        //     }
        //     },
        formatRecordType (row, column, cellValue) {
            if (cellValue == 1) {
                return '连接wifi'
            } else if (cellValue == 2) {
              return '服务'
            } else if (cellValue == 3) {
                return '取消'
            }  else if (cellValue == 4) {
              return '万能'
            }
        },
        formatFastFlag(cellValue) {
            if (cellValue == 1) {
                return '急'
            } else if (cellValue == 0) {
                return ''
            }
        },
        formatRecordState(row, column, cellValue){
            if (cellValue == 1) {
                return '待接单'
            } else if (cellValue == 2) {
                return '已接单'
            }else if(cellValue ==3){
                return '已取消'
            }else if(cellValue==4){
                return "取消失败"
            }else if(cellValue==20){
              return "已完成"
            }
        },
        handleUpdateRecord(val,state){
            let _this = this
            let cond = {
                id:val.beeperRecordId,
                state:state
            }
            EquipApi.updateRecord(cond).then(res=>{
                _this.handleCreate(val.beeperId)
            })
        },
        handleCreate(val){
            // 父组件 调用子组件
            this.dialog.open = true; // 显示弹出框
            this.dialog.title = "呼 叫 记 录";
            // console.log(val,999); // 接受来自父组件的值 根据编号 查找列表内容
            var cond = {
                beeperId: val
            }
            EquipApi.checkEquipBeeperList(cond)
                .then(res => {
                    this.tableList = res.data
                })
        },

    }
}
</script>

<style>

</style>
